"use client"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { useState, useEffect } from 'react';
import Image from 'next/image';
import Link from "next/link"
import Cookies from 'js-cookie';

export function Sidebar({ usagePremium, usageBasic, vipLevel, isLoginVisible }) {

  const [showApiMenu, setShowApiMenu] = useState(true)
  const [showCloudMenu, setShowCloudMenu] = useState(true)


  let limitBasic, limitPremium, planValue, progressBasicValue, progressPremiumValue;

  const deleteCookies = () => {
    Cookies.remove('jwt');
    window.location.reload();
  }

  const ApiClick = () => {
    setShowApiMenu(!showApiMenu);
  }

  const CloudClick = () => {
    setShowCloudMenu(!showCloudMenu);
  }



  switch (vipLevel) {
    case 0:
      limitBasic = 20;
      limitPremium = 6;
      planValue = "Free Plan";
      progressBasicValue = (usageBasic / limitBasic) * 100;
      progressPremiumValue = (usagePremium / limitPremium) * 100;
      break;
    case 1:
      limitBasic = 10000;
      limitPremium = 1500;
      planValue = "Pro+ Plan";
      progressBasicValue = (usageBasic / limitBasic) * 100;
      progressPremiumValue = (usagePremium / limitPremium) * 100;
      break;
    case 2:
      limitBasic = "∞"; // 或者使用 Unicode 字符 \u221E 来表示无穷
      limitPremium = "∞";
      planValue = "Unlimited Plan";
      progressBasicValue = (usageBasic / limitBasic) * 100;
      progressPremiumValue = (usagePremium / limitPremium) * 100;
      break;
    default:
      limitBasic = 20; // 如果 vipLevel 是其他值，可以设置一个默认值
      limitPremium = 6;
      planValue = "Free Plan";
      progressBasicValue = (usageBasic / limitBasic) * 100;
      progressPremiumValue = (usagePremium / limitPremium) * 100;
  }

  return (
    <div className="flex h-screen w-full bg-[#d0e3f1]">
      {/* bg-primary-background flex-col overflow-hidden bg-opacity-40 hidden sm:flex w-[230px] px-4 */}
      <aside className="bg-[#d0e3f1] p-4 flex flex-col">
        <div className="flex items-center mb-1 w-40 h-22">
          {/* <WebcamIcon className="w-8 h-8 mr-2" /> */}
          {/* <h1 className="text-xl font-bold">NeshAI</h1> */}
          <img src="/logo.png"></img>
        </div>
        {/* scrollbar-none mt-9 overflow-y-auto */}
        {/* flex-1：表示将元素设置为 flex 布局的一个弹性项，项的弹性系数为1，意味着它将占据可用空间的所有剩余部分。 */}
        <nav className="flex-1 space-y-2 scrollbar-none mt-3 overflow-y-auto w-48">
          {/* <Button variant="ghost" className="w-full justify-start">
            <PlusIcon className="w-6 h-6 mr-2" />
            All-In-One
          </Button> */}
          <div onClick={CloudClick} class="text-white flex justify-start">
            <div>Cloud</div>
            {showCloudMenu ? (
              <div class="ml-auto"><ArrowUpIcon ></ArrowUpIcon></div>
            ) : (
              <div class="ml-auto"><ArrowDownIcon ></ArrowDownIcon></div>
            )}
          </div>
          {showCloudMenu && (
            <>
              <Link href="/chatgpt-4o-mini">
                <Button variant="ghost" className="w-full justify-start mt-5">
                  <img src="/openai.png" className="object-contain rounded-sm w-6 h-6 mr-2"></img>
                  <span className="text-sm font-medium">GPT-4o mini</span>
                </Button>
              </Link>
              <Link href="/chatgpt-3.5">
                <Button variant="ghost" className="w-full justify-start mt-5">
                  <img src="/openai.png" className="object-contain rounded-sm w-6 h-6 mr-2"></img>
                  <span className="text-sm font-medium">GPT-3.5</span>
                </Button>
              </Link>
              <Link href="/chatgpt-4o">
                <Button variant="ghost" className="w-full justify-start mt-5">
                  <img src="/openai.png" className="object-contain rounded-sm w-6 h-6 mr-2"></img>
                  <span className="text-sm font-medium">GPT-4o</span>
                </Button>
              </Link>
              <Link href="/chatgpt-4-turbo">
                <Button variant="ghost" className="w-full justify-start mt-5">
                  <img src="/openai.png" className="object-contain rounded-sm w-6 h-6 mr-2"></img>
                  <span className="text-sm font-medium">GPT-4 Turbo</span>
                </Button>
              </Link>
              <Link href="/claude-3-5-sonnet">
                <Button variant="ghost" className="w-full justify-start mt-5">
                  <img src="/claude.png" className="object-contain rounded-sm w-6 h-6 mr-2"></img>
                  <span className="text-sm font-medium">claude-3.5-sonnet</span>
                </Button>
              </Link>
              <Link href="/claude-3-haiku">
                <Button variant="ghost" className="w-full justify-start mt-5">
                  <img src="/claude.png" className="object-contain rounded-sm w-6 h-6 mr-2"></img>
                  <span className="text-sm font-medium">claude-3-haiku</span>
                </Button>
              </Link>
              <Link href="/claude-3-opus">
                <Button variant="ghost" className="w-full justify-start mt-5">
                  <img src="/claude.png" className="object-contain rounded-sm w-6 h-6 mr-2"></img>
                  <span className="text-sm font-medium">claude-3-opus</span>
                </Button>
              </Link>
            </>
          )
          }

          <div onClick={ApiClick} class="text-white flex justify-start">
            <div>Model Tokenization</div>
            {showApiMenu ? (
              <div class="ml-auto"><ArrowUpIcon ></ArrowUpIcon></div>
            ) : (
              <div class="ml-auto"><ArrowDownIcon ></ArrowDownIcon></div>
            )}
          </div>

          {showApiMenu && (
            <>
              <Link href="https://allinone.nesh.ltd/screenshot">
                <Button variant="ghost" className="w-full justify-start mt-5">
                  <img src="/image.png" className="object-contain rounded-sm w-6 h-6 mr-2"></img>
                  <span className="text-sm font-medium">screenshot-to-code</span>
                </Button>
              </Link>
              <Link href="/segment">
                <Button variant="ghost" className="w-full justify-start mt-5">
                  <img src="/image.png" className="object-contain rounded-sm w-6 h-6 mr-2"></img>
                  <span className="text-sm font-medium">segment</span>
                </Button>
              </Link>
              <Link href="/obb">
                <Button variant="ghost" className="w-full justify-start mt-5">
                  <img src="/image.png" className="object-contain rounded-sm w-6 h-6 mr-2"></img>
                  <span className="text-sm font-medium">obb</span>
                </Button>
              </Link>
              <Link href="/classify">
                <Button variant="ghost" className="w-full justify-start mt-5">
                  <img src="/image.png" className="object-contain rounded-sm w-6 h-6 mr-2"></img>
                  <span className="text-sm font-medium">classify</span>
                </Button>
              </Link>
              <Link href="/pose">
                <Button variant="ghost" className="w-full justify-start mt-5">
                  <img src="/image.png" className="object-contain rounded-sm w-6 h-6 mr-2"></img>
                  <span className="text-sm font-medium">pose</span>
                </Button>
              </Link>
              <Link href="/predict">
                <Button variant="ghost" className="w-full justify-start mt-5">
                  <img src="/image.png" className="object-contain rounded-sm w-6 h-6 mr-2"></img>
                  <span className="text-sm font-medium">predict</span>
                </Button>
              </Link>
            </>
          )
          }
        </nav>

        <div className="mt-auto">
          <div className="mt-5">
            <div className="rounded-[10px] bg-gradient-to-b from-[#ffffff99] to-transparent p-[1px] dark:from-transparent">
              <div className="bg-white p-4 rounded-lg mb-4">
                <div className="flex justify-between items-center mb-2">
                  <Link href="/subscribe"><span className="text-xs font-bold">{planValue}</span></Link>
                  {isLoginVisible ? <Link href="/login"><span className="text-xs font-bold">LOGIN</span></Link> : <button onClick={deleteCookies} className="text-xs font-bold">LOGOUT</button>}
                </div>
                <div className="flex justify-between items-center mb-2">
                  <span className="text-xs">basic</span>
                  <span className="text-xs">{usageBasic}/{limitBasic}</span>
                </div>
                <Progress value={progressBasicValue} className="w-full h-2 mb-2" />
                <div className="flex justify-between items-center">
                  <span className="text-xs">Advanced</span>
                  <span className="text-xs">{usagePremium}/{limitPremium}</span>
                </div>
                <Progress value={progressPremiumValue} className="w-full h-2" />
              </div>
              <div className="flex justify-around">
                <Button variant="ghost" size="icon">
                  <Link href="/"><HomeIcon className="w-6 h-6" /></Link>
                </Button>
                <Button variant="ghost" size="icon">
                  <Link href="/setting"><SettingsIcon className="w-6 h-6" /></Link>
                </Button>
                <Button variant="ghost" size="icon">
                  <Link href="/subscribe"><HandHelpingIcon className="w-6 h-6" /></Link>
                </Button>
              </div>
            </div>
          </div>
        </div>
      </aside>
    </div>
  )
}

function ArrowDownIcon(props) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className="text-primary w-6 h-6"
      {...props}
    >
      <line x1="12" y1="5" x2="12" y2="19"></line>
      <polyline points="19 12 12 19 5 12"></polyline>
    </svg>
  )
}

function ArrowUpIcon(props) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className="text-primary w-6 h-6"
      {...props}
    >
      <line x1="12" y1="19" x2="12" y2="5"></line>
      <polyline points="5 12 12 5 19 12"></polyline>
    </svg>
  )
}

function CpuIcon(props) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <rect width="16" height="16" x="4" y="4" rx="2" />
      <rect width="6" height="6" x="9" y="9" rx="1" />
      <path d="M15 2v2" />
      <path d="M15 20v2" />
      <path d="M2 15h2" />
      <path d="M2 9h2" />
      <path d="M20 15h2" />
      <path d="M20 9h2" />
      <path d="M9 2v2" />
      <path d="M9 20v2" />
    </svg>
  )
}


function CroissantIcon(props) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="m4.6 13.11 5.79-3.21c1.89-1.05 4.79 1.78 3.71 3.71l-3.22 5.81C8.8 23.16.79 15.23 4.6 13.11Z" />
      <path d="m10.5 9.5-1-2.29C9.2 6.48 8.8 6 8 6H4.5C2.79 6 2 6.5 2 8.5a7.71 7.71 0 0 0 2 4.83" />
      <path d="M8 6c0-1.55.24-4-2-4-2 0-2.5 2.17-2.5 4" />
      <path d="m14.5 13.5 2.29 1c.73.3 1.21.7 1.21 1.5v3.5c0 1.71-.5 2.5-2.5 2.5a7.71 7.71 0 0 1-4.83-2" />
      <path d="M18 16c1.55 0 4-.24 4 2 0 2-2.17 2.5-4 2.5" />
    </svg>
  )
}


function Disc3Icon(props) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <circle cx="12" cy="12" r="10" />
      <path d="M6 12c0-1.7.7-3.2 1.8-4.2" />
      <circle cx="12" cy="12" r="2" />
      <path d="M18 12c0 1.7-.7 3.2-1.8 4.2" />
    </svg>
  )
}


function GavelIcon(props) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="m14.5 12.5-8 8a2.119 2.119 0 1 1-3-3l8-8" />
      <path d="m16 16 6-6" />
      <path d="m8 8 6-6" />
      <path d="m9 7 8 8" />
      <path d="m21 11-8-8" />
    </svg>
  )
}


function HandHelpingIcon(props) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M11 12h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 14" />
      <path d="m7 18 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9" />
      <path d="m2 13 6 6" />
    </svg>
  )
}


function HomeIcon(props) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
      <polyline points="9 22 9 12 15 12 15 22" />
    </svg>
  )
}


function LoaderIcon(props) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M12 2v4" />
      <path d="m16.2 7.8 2.9-2.9" />
      <path d="M18 12h4" />
      <path d="m16.2 16.2 2.9 2.9" />
      <path d="M12 18v4" />
      <path d="m4.9 19.1 2.9-2.9" />
      <path d="M2 12h4" />
      <path d="m4.9 4.9 2.9 2.9" />
    </svg>
  )
}


function Minimize2Icon(props) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <polyline points="4 14 10 14 10 20" />
      <polyline points="20 10 14 10 14 4" />
      <line x1="14" x2="21" y1="10" y2="3" />
      <line x1="3" x2="10" y1="21" y2="14" />
    </svg>
  )
}


function PlusIcon(props) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M5 12h14" />
      <path d="M12 5v14" />
    </svg>
  )
}


function SettingsIcon(props) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
      <circle cx="12" cy="12" r="3" />
    </svg>
  )
}


function WebcamIcon(props) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <circle cx="12" cy="10" r="8" />
      <circle cx="12" cy="10" r="3" />
      <path d="M7 22h10" />
      <path d="M12 22v-4" />
    </svg>
  )
}


function XIcon(props) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M18 6 6 18" />
      <path d="m6 6 12 12" />
    </svg>
  )
}
